---
title: Analyser la taille du bundle
description: Apprenez à analyser le bundle généré par Astro en utilisant `rollup-plugin-visualizer`.
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Il est important de comprendre ce qui fait partie d'un bundle Astro pour améliorer les performances du site. La visualisation du bundle peut donner des indices sur les modifications à apporter à votre projet pour réduire la taille du bundle.

## Recette

La [bibliothèque `rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer) vous permet de visualiser et d'analyser votre bundle Rollup pour voir quels modules prennent de la place.
<Steps>
1. Installez `rollup-plugin-visualizer`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Ajoutez le module d'extension au fichier `astro.config.mjs` :

    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
    vite: {
        plugins: [visualizer({
            emitFile: true,
            filename: "stats.html",
        })]
    }
    });
    ```
3. Exécutez la commande de compilation :

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. Trouvez le(s) fichier(s) `stats.html` de votre projet.

    Ce fichier sera à la racine de votre répertoire `dist/` pour les sites entièrement statiques et vous permettra de voir ce qui est inclus dans le bundle.
  
    Si votre projet Astro utilise le rendu à la demande, vous aurez deux fichiers `stats.html`. L'un sera pour le client, l'autre pour le serveur, et chacun sera situé à la racine des répertoires `dist/client` et `dist/server/`.
  
    Voir [la documentation de Rollup Plugin Visualizer](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files) pour savoir comment interpréter ces fichiers, ou configurer des options spécifiques.

</Steps>

:::note
Compte tenu de l'approche unique d'Astro en matière d'hydratation, le modèle n'est pas nécessairement représentatif du bundle que le client recevra.

Le visualisateur Rollup montre toutes les dépendances utilisées sur le site, mais il ne décompose pas la taille du bundle par page.
:::
